<template>
  <div class="scroll-wrap">
    <el-table
      class="top-table selectOption"
      :data="tableData"
      border
      style="
        width: 100%;
        margin: 0 auto;
        --el-table-border-color: none;
        --el-table-bg-color: none;
        --el-table-tr-bg-color: none;
      "
      :row-class-name="tableRowClassName"
      :header-row-class-name="tableHeaderRowClassName"
      :cell-style="{
        color: '#FFFFFF',
        'text-align': 'center',
        'font-family': 'DINPro',
      }"
      :header-cell-style="{
        backgroundColor: 'transparent !important',
        // backgroundImage: `url(${preview2})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: 'auto',
      }"
    >
      <el-table-column label="TOP" width="100" show-overflow-tooltip>
        <template #default="scope">
          <span v-show="scope.row.deviceName || scope.row.id">
            {{ scope.$index + 1 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="deviceName"
        label="设备名称"
        show-overflow-tooltip
      />
      <el-table-column
        prop="weekSum"
        label="合计"
        width="150"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <span v-show="row.deviceName || row.id">{{ row.weekSum || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="weekData1"
        label="星期一"
        width="150"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <span v-show="row.deviceName || row.id">{{
            row.weekData1 || 0
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="weekData2"
        label="星期二"
        width="150"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <span v-show="row.deviceName || row.id">{{
            row.weekData2 || 0
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="weekData3"
        label="星期三"
        width="150"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <span v-show="row.deviceName || row.id">{{
            row.weekData3 || 0
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="weekData4"
        label="星期四"
        width="150"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <span v-show="row.deviceName || row.id">{{
            row.weekData4 || 0
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="weekData5"
        label="星期五"
        width="150"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <span v-show="row.deviceName || row.id">{{
            row.weekData5 || 0
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="weekData6"
        label="星期六"
        width="150"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <span v-show="row.deviceName || row.id">{{
            row.weekData6 || 0
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="weekData7"
        label="星期日"
        width="150"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <span v-show="row.deviceName || row.id">{{
            row.weekData7 || 0
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="scroll-content">
      <vue3-seamless-scroll
        class="scroll-list"
        :list="tableData"
        :hover="true"
        :step="1"
        :wheel="true"
        :isWatch="true"
        :limitScrollNum="5"
        :singleHeight="60"
        :singleWaitTime="3000"
        :key="scrollKey"
        v-model="isParse"
      >
        <el-table
          class="scroll-ul bottom-table selectOption"
          :data="tableData"
          border
          style="
            width: 100%;
            margin: 0 auto;
            --el-table-border-color: none;
            --el-table-bg-color: none;
            --el-table-tr-bg-color: none;
          "
          :row-class-name="tableRowClassName"
          :header-row-class-name="tableHeaderRowClassName"
          :cell-style="{
            color: '#FFFFFF',
            'text-align': 'center',
            'font-family': 'DINPro',
          }"
          :header-cell-style="{
            backgroundColor: 'transparent !important',
            // backgroundImage: `url(${preview2})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundSize: 'auto',
          }"
        >
          <el-table-column label="TOP" width="100" show-overflow-tooltip>
            <template #default="scope">
              <span v-show="scope.row.deviceName || scope.row.id">
                {{ scope.$index + 1 }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="deviceName"
            label="设备名称"
            show-overflow-tooltip
          />
          <el-table-column
            prop="weekSum"
            label="合计"
            width="150"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span v-show="row.deviceName || row.id">{{
                row.weekSum || 0
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="weekData1"
            label="星期一"
            width="150"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span v-show="row.deviceName || row.id">{{
                row.weekData1 || 0
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="weekData2"
            label="星期二"
            width="150"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span v-show="row.deviceName || row.id">{{
                row.weekData2 || 0
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="weekData3"
            label="星期三"
            width="150"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span v-show="row.deviceName || row.id">{{
                row.weekData3 || 0
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="weekData4"
            label="星期四"
            width="150"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span v-show="row.deviceName || row.id">{{
                row.weekData4 || 0
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="weekData5"
            label="星期五"
            width="150"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span v-show="row.deviceName || row.id">{{
                row.weekData5 || 0
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="weekData6"
            label="星期六"
            width="150"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span v-show="row.deviceName || row.id">{{
                row.weekData6 || 0
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="weekData7"
            label="星期日"
            width="150"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span v-show="row.deviceName || row.id">{{
                row.weekData7 || 0
              }}</span>
            </template>
          </el-table-column>
        </el-table></vue3-seamless-scroll
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import preview2 from "@/assets/images/screen/preview2.png";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { deepClone } from "@/utils/commonHooks";
const props = defineProps({
  // table数据
  planBIDTOS: {
    type: Array,
    default: () => [],
  },
  // table显示行数
  tableColumnNum: {
    type: Number,
    default: 18,
  },
});

const isParse = ref(false);
const { planBIDTOS, tableColumnNum } = toRefs(props);
const tableData = ref<any>([]);

const tableObject = {
  id: "",
  deviceStatusName: "",
  deviceName: "",
  andCall: "",
  stopTime: "",
  CallTime: "",
  status: "",
  // deviceStatusName: "停机维修",
  // deviceName: "DK755-35",
  // andCall: "安东呼叫名称",
  // stopTime: "2024-06-23 12:30:10",
  // callTime: "10",
  // status: "呼叫中",
};

const scrollKey = ref<number>(1);
watch(
  () => planBIDTOS,
  (newVal) => {
    const data = deepClone(newVal.value);
    if (data.length > tableColumnNum.value) {
      tableData.value = data;
      // tableData.value = data.slice(0, tableColumnNum.value);
    } else {
      let resultData = data;
      const resultNum = tableColumnNum.value - data.length;
      if (resultNum > 0) {
        for (let i = 0; i < resultNum; i++) {
          resultData.push(tableObject);
        }
      }
      tableData.value = resultData;
      // tableData.value = [
      //   ...resultData,
      //   ...resultData,
      //   ...resultData,
      //   ...resultData,
      //   ...resultData,
      //   ...resultData,
      //   ...resultData,
      //   ...resultData,
      //   ...resultData,
      // ];
    }
    scrollKey.value = Number(new Date());
    if (tableData.value.length > 5) {
      setTimeout(() => {
        isParse.value = true;
      }, 3000);
    } else {
      isParse.value = false;
    }
  },
  {
    deep: true,
    immediate: false,
  }
);

// 行样式解析
function tableRowClassName(rowIndex: any) {
  if (rowIndex.rowIndex % 2 != 0) {
    return "evenRow";
  }
  return "oddRow";
}

function tableHeaderRowClassName() {
  if (tableColumnNum.value === 18) {
    return "h-[90px]";
  }
  return "h-[65px]";
}

// 表格百分比处理
function handlePercentage(percent: any) {
  let result = "";
  if (percent && percent.includes("%")) {
    result = percent.split("%")[0];
  }
  return Number(result) || 0;
}
</script>

<style lang="scss" scoped>
.scroll-wrap {
  width: 100%;
  height: 374px;
  overflow: hidden;
}
.scroll-header,
.scroll-content {
  width: 100%;
  display: flex;
}
.scroll-list {
  width: 100%;
  overflow: hidden;
}
.scroll-ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-li {
  width: 100%;
  display: flex;
  line-height: 35px;
}

:deep(.bottom-table .el-table__header) {
  display: none;
}

:deep(.top-table .el-table__body-wrapper) {
  display: none;
}
// 整体表格样式
:deep(.el-table) {
  thead {
    // height: 78px;
    background: rgba(15, 36, 62, 0.6);
    .cell {
      font-size: 30px;
      line-height: 32px;
      writing-mode: horizontal-tb;
      word-spacing: 0px;
      writing-mode: horizontal-tb;
      text-orientation: upright;
      color: transparent;
      background: linear-gradient(
          0deg,
          rgb(88, 175, 255) 0px,
          rgb(255, 255, 255) 100%
        )
        text;
      clip-path: inset(1px);
    }
  }
  tbody {
    tr {
      height: 60px;
      .cell {
        font-size: 30px;
        line-height: 32px;
      }
    }
    tr:hover {
      background-color: rgb(55, 90, 136) !important;
    }
    td.el-table__cell {
      background-color: transparent !important;
    }
  }

  .el-table__empty-text {
    color: rgb(199, 228, 240);
    font-size: 30px;
    line-height: 200px;
  }
}

// 单行样式
:deep(.evenRow) {
  background: rgba(15, 36, 62, 0.95);
  td {
    .cell {
      color: rgb(104, 201, 240);
    }
  }
}

// 双行样式
:deep(.oddRow) {
  background: rgba(10, 24, 42, 0.95);
  td {
    .cell {
      color: rgb(168, 190, 216);
    }
  }
}
:deep(.el-progress) {
  .el-progress-bar__outer {
    background: rgba(74, 97, 126, 0.95);
  }
  .el-progress-bar__innerText {
    font-size: 17px;
  }
  .el-progress-bar__outer {
    border-radius: 8px;
  }
  .el-progress-bar__inner {
    border-radius: 8px;
    background-image: linear-gradient(
      to right,
      rgb(25, 76, 135),
      rgb(0, 141, 255)
    );
  }
}
</style>
